<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="唯一ID" prop="id">
                            <el-input v-model="condition.search.id" placeholder="唯一ID"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="condition.search.title" placeholder="标题"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="有效期" prop="effective">
                            <el-select v-model="condition.search.effective" placeholder="有效期">
                                <el-option label="固定期限" value="FIXED"></el-option>
                                <el-option label="永久期限" value="PERMANENT"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="状态" prop="status">
                            <el-input v-model="condition.search.status" placeholder="状态"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :data="tableData"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                width="120px"
                label="标题">
            </el-table-column>
            <el-table-column
                prop="effective"
                :formatter="formatEffective"
                label="有效期">
            </el-table-column>
            <el-table-column
                prop="description"
                width="150px"
                label="说明">
                <template v-slot="scope">
                    <table-popover :text=scope.row.description :length="36"></table-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="pointsDesc"
                width="150px"
                label="积分">
            </el-table-column>
            <el-table-column
                prop="rechargeDesc"
                width="120px"
                label="储值">
            </el-table-column>
            <el-table-column
                prop="backgroundPicUrl"
                width="120px"
                label="背景图片">
                <template v-slot="scope">
                    <el-image style="width: 80px; height: 80px"
                              :src="scope.row.backgroundPicUrl"
                              fit="contain"
                              :preview-src-list="backgroundPicUrls">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                prop="levelCycleDays"
                width="110px"
                label="等级循环天数">
            </el-table-column>
            <el-table-column
                prop="memberDayDesc"
                width="100px"
                label="会员日">
            </el-table-column>
            <el-table-column
                prop="quantityDesc"
                width="100px"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="smsSign"
                label="短信签名">
            </el-table-column>
            <el-table-column
                prop="status"
                :formatter="formatStatus"
                label="状态">
            </el-table-column>
            <el-table-column
                prop="createTime"
                width="90px"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="createBy"
                width="60px"
                label="创建者">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="120px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="onDetail(scope.row)" type="text" size="small">详情</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-drawer ref="drawer" direction="rtl" :title=addOrUpdateDialogTitle width="50%"
                   :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="150px" size="small">
                <el-form-item label="标题">
                    <el-input v-model="addOrUpdateForm.title" placeholder="取个响亮的标题吧" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="发放总数量">
                    <el-input v-model="addOrUpdateForm.totalQuantity" placeholder="发放总数量"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="有效期">
                    <el-select v-model="addOrUpdateForm.effective" placeholder="有效期">
                        <el-option label="固定期限" value="FIXED"></el-option>
                        <el-option label="永久有效" value="PERMANENT"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="有效期开始日期" v-if="addOrUpdateForm.effective == 'FIXED'">
                    <el-date-picker
                        v-model="addOrUpdateForm.effectiveStart"
                        type="date"
                        placeholder="有效期开始日期"
                        value-format="yyyy-MM-dd"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效期结束日期" v-if="addOrUpdateForm.effective == 'FIXED'">
                    <el-date-picker
                        v-model="addOrUpdateForm.effectiveEnd"
                        type="date"
                        placeholder="有效期结束日期"
                        value-format="yyyy-MM-dd"
                        align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否开启积分">
                    <el-switch v-model="addOrUpdateForm.pointsRadio"></el-switch>
                </el-form-item>
                <el-form-item label="消费X元" v-if="addOrUpdateForm.pointsRadio">
                    <el-input v-model="addOrUpdateForm.pointsPerConsume" placeholder="消费X元"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="赠送X积分" v-if="addOrUpdateForm.pointsRadio">
                    <el-input v-model="addOrUpdateForm.pointsPerGive" placeholder="赠送X积分"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="每次最多赠送X积分" v-if="addOrUpdateForm.pointsRadio">
                    <el-input v-model="addOrUpdateForm.pointsGiveMax" placeholder="每次最多赠送X积分"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="积分有效期" v-if="addOrUpdateForm.pointsRadio">
                    <el-select v-model="addOrUpdateForm.pointsEffective" placeholder="积分有效期">
                        <el-option label="入会时间" value="APPLY_TIME"></el-option>
                        <el-option label="永久有效" value="PERMANENT"></el-option>
                        <el-option label="固定日期" value="FIXED"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="积分失效日期"
                              v-if="addOrUpdateForm.pointsRadio && addOrUpdateForm.pointsEffective == 'FIXED'">
                    <el-input v-model="addOrUpdateForm.pointsEffectiveDay"
                              placeholder="积分失效日期"></el-input>
                    <div class="form-tips">请输入05-30类似格式，代表每年的5月30号清零</div>
                </el-form-item>
                <el-form-item label="积分到期前几天提醒" v-if="addOrUpdateForm.pointsRadio">
                    <el-input v-model="addOrUpdateForm.pointsDueDays" placeholder="积分到期前几天提醒"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="积分说明" v-if="addOrUpdateForm.pointsRadio">
                    <el-input ref="desc" type="textarea" autosize v-model="addOrUpdateForm.pointsDescription"
                              placeholder="请输入积分说明"></el-input>
                </el-form-item>
                <el-form-item label="会员卡说明">
                    <el-input ref="desc" type="textarea" autosize v-model="addOrUpdateForm.description"
                              placeholder="请输入会员卡说明"></el-input>
                </el-form-item>
                <el-form-item label="背景图片">
                    <el-button @click="selectAlbumDialogVisible = true" size="mini" type="success">
                        选择图片
                    </el-button>
                    <div v-if="selectedAlbum.id" style="margin-top: 10px">
                        <media-show :url="selectedAlbum.url"></media-show>
                    </div>
                </el-form-item>
                <el-form-item label="是否开启储值">
                    <el-switch v-model="addOrUpdateForm.rechargeRadio"></el-switch>
                </el-form-item>
                <el-form-item label="是否支持线上储值">
                    <el-switch v-model="addOrUpdateForm.rechargeOnlineRadio"></el-switch>
                </el-form-item>
                <el-form-item label="是否支持线上储值输入金额">
                    <el-switch v-model="addOrUpdateForm.rechargeOnlineInputRadio"></el-switch>
                </el-form-item>
                <el-form-item label="会员等级循环天数">
                    <el-input v-model="addOrUpdateForm.levelCycleDays" placeholder="会员等级循环天数"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="是否开启会员日">
                    <el-switch v-model="addOrUpdateForm.memberDayRadio"></el-switch>
                </el-form-item>
                <el-form-item label="会员日类型" v-if="addOrUpdateForm.memberDayRadio">
                    <el-select v-model="addOrUpdateForm.memberDayType" placeholder="会员日类型">
                        <el-option label="每周" value="WEEK"></el-option>
                        <el-option label="每月" value="MONTH"></el-option>
                        <el-option label="每年" value="YEAR"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="具体会员日" v-if="addOrUpdateForm.memberDayRadio">
                    <el-input v-model="addOrUpdateForm.memberDay" placeholder="具体会员日"></el-input>
                    <div class="form-tips">
                        如果类型是年的话，请输入05-30类似格式，代表每年的5月30号，其它类型则输入具体数字，比如说每周二，则只需要输入2就可以了！
                    </div>
                </el-form-item>
                <el-form-item label="短信签名">
                    <el-input v-model="addOrUpdateForm.smsSign" placeholder="短信签名"></el-input>
                </el-form-item>
            </el-form>
            <div class="drawer-footer">
                <el-button class="drawer-footer-button" @click="addOrUpdateDialogVisible = false" size="small">取 消
                </el-button>
                <el-button class="drawer-footer-button" @click="addOrUpdateConfirm" type="primary" size="small">确 定
                </el-button>
            </div>
        </el-drawer>

        <el-dialog title="选择图片" width="70%" :visible.sync="selectAlbumDialogVisible" append-to-body>
            <album ref="albumSelect" size="small" @select="onSelectAlbum" mode="select"></album>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
    </div>
</template>

<script>
import {addMemberCard, deleteMemberCard, getMemberCardByPage, getUploadUrl, updateMemberCard} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";
import MediaShow from "@/component/single/MediaShow";
import Album from "@/component/Album";

export default {
    name: "MemberCard",
    components: {TablePopover, MediaShow, Album},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},
            // 背景图片url数组
            backgroundPicUrls: [],
            // 禁用
            disabled: false,

            selectAlbumDialogVisible: false,
            selectedAlbum: [],
        }
    },
    methods: {
        upload() {
            return getUploadUrl();
        },
        onSelectAlbum(row) {
            this.selectedAlbum = row;
            this.selectAlbumDialogVisible = false;
            this.addOrUpdateForm.backgroundPicUrl = row.url;
            this.addOrUpdateForm.size = row.size;
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatEffective: function (row, column, cellValue) {
            if (cellValue == 'FIXED') {
                return "固定期限";
            } else if (cellValue == 'PERMANENT') {
                return "永久有效";
            } else {
                return "未知";
            }
        },
        formatPointsEffective: function (row, column, cellValue) {
            if (cellValue == 'PERMANENT') {
                return "永久有效";
            } else if (cellValue == 'ONE_YEAR') {
                return "自然年";
            } else {
                return "未知";
            }
        },
        formatStatus: function (row, column, cellValue) {
            if (cellValue == 'AUDIT_SUCCEEDED') {
                return "审核成功";
            } else {
                return cellValue;
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            this.$set(this.addOrUpdateForm, "pointsRadio", true)
            this.$set(this.addOrUpdateForm, "memberDayRadio", true)
            this.$set(this.addOrUpdateForm, "rechargeRadio", false)
            this.$set(this.addOrUpdateForm, "rechargeOnlineRadio", false)
            this.$set(this.addOrUpdateForm, "rechargeOnlineInputRadio", false)
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
            this.disabled = true;
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addMemberCard(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateMemberCard(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMemberCard({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        onDetail: function (row) {
            this.$router.push({path: '/member/card/detail', query: {id: row.id}});
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
            this.$refs.desc.resizeTextarea();
        },
        // 获取表格数据
        getData: function () {
            getMemberCardByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
                this.tableData.forEach((item, index, arr) => {
                    this.backgroundPicUrls.push(item.backgroundPicUrl);
                })
            });
        },
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
